<template>
    <div class="customizeForm">
        <div class="head">
            <el-button type="primary" @click="addHandle">+新增自定义表单</el-button>
        </div>
        <div class="body" id="customizeFormBody">
            <el-table border :data="tableData" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" :height="tableHeight">
                <el-table-column prop="name" label="表单名称"></el-table-column>
                <el-table-column prop="updateTime" label="修改时间"></el-table-column>
                <el-table-column label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button type="text" @click="editHandle(scope.row)" title="点击进入编辑">编辑</el-button>
                        <el-button type="text" style="margin-left: 20px; color: #ff1f2c" @click="delHandle(scope.row)" title="点击删除">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pages">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pages.currentPage" :page-sizes="pages.pageSizes" :page-size="pages.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pages.total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import Bus from "@/utils/bus.js";
import headApi from '@/utils/hade';
import { getToken } from "@/utils/auth";
export default {
    name: "customizeForm",
    data() {
        return {
            pageName: "自定义表单列表页",
            loading: false,
            tableHeight: 0,
            tableData: [
                {
                    id: 1,
                    name: "自定义表单1",
                    updateTime: "2022-06-01 22:14:30",
                },
                {
                    id: 2,
                    name: "自定义表单2",
                    updateTime: "2022-06-01 22:14:30",
                },
                {
                    id: 3,
                    name: "自定义表单3",
                    updateTime: "2022-06-01 22:14:30",
                },
                {
                    id: 4,
                    name: "自定义表单4",
                    updateTime: "2022-06-01 22:14:30",
                },
                {
                    id: 5,
                    name: "自定义表单5",
                    updateTime: "2022-06-01 22:14:30",
                },
            ],
            pages: {
                currentPage: 1,
                pageSizes: [10, 20, 30],
                pageSize: 10,
                total: 10,
            },
        };
    },
    created() {},
    props: [],
    components: {},
    mounted() {
        this.$nextTick(() => {
            if (this.$parent.$parent.$parent.activeName === "customizeForm") {
                this.init();
            } else {
                setTimeout(() => {
                    if (
                        this.$parent.$parent.$parent.activeName ===
                        "customizeForm"
                    ) {
                        this.init();
                    }
                }, 1000);
            }
        });
        window.resize = () => {
            this.setTableHeight();
        };
    },
    methods: {
        //初始化
        init() {
            localStorage.removeItem("decorateFormModuleId");
            //   this.getTableList();
            //   this.tableData = this.list;
            this.setTableHeight();
            setTimeout(() => {
                if (this.tableHeight === 0) {
                    // //console.log("未检索到projectBody高度");
                    this.setTableHeight();
                }
            }, 200);
        },
        //动态设置表格高度
        setTableHeight() {
            let bodyDom = document.getElementById("customizeFormBody");
            if (bodyDom && bodyDom.getBoundingClientRect().height) {
                this.tableHeight = bodyDom.getBoundingClientRect().height;
            } else {
                if (this.$parent.$parent.activeName === "customizeForm") {
                    setTimeout(() => {
                        // //console.log("project再次获取table高度");
                        this.setTableHeight();
                    }, 1500);
                }
            }
        },
        //获取列表数据
        getTableList() {
            this.loading = true;
            this.tableData = [];
            if (getToken()) {
                this.axios
                    .post(
                        `${headApi}/appPageContent/list`,
                        {
                            pageType: 4,
                            tenantId: localStorage.getItem("tenantId"),
                        },
                        { headers: { Authorization: "Bearer " + getToken() } }
                    )
                    .then((res) => {
                        this.loading = false;
                        if (res && res.data) {
                            //console.log(res);
                            let { code, data, msg } = res.data;
                            if (code === 200) {
                                if (data && data.length > 0) {
                                    let cs = this.componentStyle;
                                    if (cs && cs.length > 0) {
                                        data.forEach((item) => {
                                            cs.forEach((row) => {
                                                if (
                                                    item.componentTypeId ===
                                                    row.id
                                                ) {
                                                    item.componentTypeName =
                                                        row.componentTypeName;
                                                }
                                            });
                                        });
                                    }
                                    this.tableData = data;
                                    this.pages.total = data.length;
                                }
                            } else {
                                if (msg) {
                                    this.$message.warning(msg);
                                } else {
                                    this.$message.error("接口请求失败");
                                }
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                        this.loading = false;
                    });
            }
        },
        //新增
        addHandle() {
            localStorage.removeItem("decorateFormModuleId");
            this.$router.push({
                name: "setForm",
            });
        },
        //点击，进入模式
        editHandle(row) {
            // if(typeof row.id === "string") {
            localStorage.setItem("decorateFormModuleId", row.id);
            this.$router.push({
                name: "setForm",
            });
            // } else if(typeof row.id === "number") {
            //   this.addHandle();
            // }
        },
        //点击，删除
        delHandle(row) {
            this.$confirm("删除后不可恢复, 确定删除吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    //执行删除的方法
                    this.delPage(row);
                })
                .catch(() => {});
        },
        delPage(row) {
            if (getToken()) {
                this.loading = true;
                this.axios.delete(`${headApi}/appPageContent/${row.id}`,{
                        headers: { Authorization: "Bearer " + getToken() },
                    })
                    .then((res) => {
                        this.loading = false;
                        if (res && res.data) {
                            let { code, data, msg } = res.data;
                            if (code == 200) {
                                this.$message.success("删除成功");
                                setTimeout(() => {
                                    this.getTableList();
                                }, 1500);
                            } else {
                                this.$message.warning(msg);
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                        }
                    })
                    .catch((err) => {
                        this.loading = false;
                        //console.log(err);
                    });
            }
        },
        //切换每页展示多少条数据
        handleSizeChange(pageSize) {
            this.pages.pageSize = pageSize;
            this.getTableList();
        },
        //点击分页
        handleCurrentChange(page) {
            this.pages.currentPage = page;
            this.getTableList();
        },
    },
    computed: {},
    watch: {},
};
</script>
<style scoped lang="scss">
.customizeForm {
    height: 100%;
    .head {
        margin-bottom: 15px;
    }
    .body {
        margin-bottom: 15px;
        height: calc(100% - 98px);
        .el-table {
            height: 100%;
            .row {
                display: flex;
                align-items: center;
            }
            .logoBox,
            .iconBox {
                width: 30px;
                height: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .logoBox {
                margin-right: 10px;
                .logo {
                    width: 30px;
                    height: 30px;
                    border-radius: 100%;
                }
            }
            .iconBox {
                margin-right: 3px;
                i {
                    width: 26px;
                    height: 26px;
                    font-size: 14px;
                    border-radius: 100%;
                    color: #fff;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
    }
    .pages {
        display: flex;
        justify-content: flex-end;
    }
}
</style>
